<script lang="ts" setup>
import Product from './Product.vue'
import XLoadMore from '@/components/XLoadMore.vue'
import { queryPlayRecordPage } from '@/api/user'
import type { IPlayRecord } from '@/typings/interface'

let end = $ref(false)
let playRecordPage = $ref<IPlayRecord[]>([])
let status = $ref<'more' | 'loading' | 'nomore'>('more')

const pageSize = $ref({
  page: 1,
  size: 4
})


const { isLogin } = $(useUser())
//请求数据
async function sendRequest() {
  return (await queryPlayRecordPage(pageSize))?.data?.current_data
}

// 页面滑动加载数据
onShow(() => {
  if (isLogin) {
    pageSize.page = 1
    sendRequest().then(data => playRecordPage = data)
  }
})

// 设置滑动监听
uni.$on('studyLoadMore', () => {
  if (end) {
    status = 'nomore'
    return
  }
  pageSize.page = pageSize.page + 1
  status = 'loading'
  sendRequest().then(data => {
    playRecordPage = playRecordPage.concat(data)
    status = 'more'
    if (data.length < 12) {
      end = true
      status = 'nomore'
    }
  })
})
</script>

<template>
  <view class="container">
    <view v-if="isLogin">
      <view v-if="playRecordPage.length > 0">
        <!-- 课程列表 -->
        <view class="products">
          <Product v-for="item in playRecordPage" :key="item.id" :product="item" />
        </view>
        <view mb-3>
          <XLoadMore :status="status" />
        </view>
      </view>
      <view v-else w-full center mt-2>
        暂无数据
      </view>
    </view>
    <view v-else w-full center mt-3>
      请先登录
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {

  .tab_top {
    width: 100%;
    display: flex;
    background-color: white;
  }

  .products {
    padding: 0 20rpx;
    margin-top: 45rpx;
  }
}
</style>